<template>
  <div>
    <!--    <el-container >-->
    <el-header style="width: 100%;">
      <el-card shadow="hover" >
        <el-avatar :size="60" style="vertical-align: middle; margin-right: 20px; "
                   :src="rtnUserInfo.imageUrl"></el-avatar>
        <h4 style="font-weight: 400; font-size: 20px;display: inline-block; vertical-align: middle ">
          {{ getTimeState }}{{ roleName }}，欢迎进入家谱管理系统！</h4>
      </el-card>
    </el-header>
    <!--    </el-container>-->
  </div>

</template>

<script>
import request from "@/utils/request";


export default {
  name: "home",
  data() {
    return {
      value: new Date(),
      visualData: {},
      schoolNumber: '',
      classNumber: '',
      courseNumber: '',
      schoolSex: '',
      CourseCount: "",
    }
  },
  computed: {
    getTimeState() {
      // 获取当前时间
      let timeNow = new Date();
      // 获取当前小时
      let hours = timeNow.getHours();
      // 设置默认文字
      let state = ``;
      // 判断当前时间段
      if (hours >= 0 && hours <= 10) {
        state = `早上好，`;
      } else if (hours > 10 && hours <= 14) {
        state = `中午好，`;
      } else if (hours > 14 && hours <= 18) {
        state = `下午好，`;
      } else if (hours > 18 && hours <= 24) {
        state = `晚上好，`;
      }
      return state;
    },
    rtnUserInfo() {
      return sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {}
    },
    roleName() {
      let userType = sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")).userType : "";
      if (userType === 1) {
        return '管理员'
      } else if (userType === 2) {
        return '学生'
      } else {
        return '教师'
      }
    },
  },
  mounted() {
    var myChart1 = echarts.init(document.getElementById('schoolNumber'));
    var myChart2 = echarts.init(document.getElementById('schoolSex'));
    var optionSchoolNumber = {
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      color: ['#feb513', '#30ca40', '#a147eb'],
      series: [
        {
          name: '人数统计',
          type: 'pie',
          radius: '60%',
          data: [],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(210,23,23,0.5)'
            }
          }
        }
      ]
    };
    var optionSexNumber = {
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/> {b} : {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: '性别比例',
          type: 'pie',
          radius: '60%',
          data: [],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        }
      },
      toolbox: {
        feature: {
          dataView: { show: true, readOnly: false },
          magicType: { show: true, type: ['line', 'bar'] },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      color: ['#feb513', '#30ca40', '#474aeb','#38efda'],
      legend: {
        data: ['总人数', '优秀人数', '及格率']
      },
      xAxis: [
        {
          type: 'category',
          data: [],
          axisPointer: {
            type: 'shadow'
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '班级人数',
          min: 0,
          max: 50,
          interval: 10,
          axisLabel: {
            formatter: '{value} 人'
          }
        },
        {
          type: 'value',
          name: '及格率',
          min: 0,
          max: 100,
          interval: 20,
          axisLabel: {
            formatter: '{value} %'
          }
        }
      ],
      series: [
        {
          name: '总人数',
          type: 'bar',
          tooltip: {
            valueFormatter: function (value) {
              return value + ' 人';
            }
          },
          data: []
        },
        /*{
          name: '不及格人数',
          type: 'bar',
          tooltip: {
            valueFormatter: function (value) {
              return value + ' 人';
            }
          },
          data: []
        },
        */
        {
          name: '优秀人数',
          type: 'bar',
          tooltip: {
            valueFormatter: function (value) {
              return value + ' 人';
            }
          },
          data: []
        },
        {
          // 每班人数
          name: '及格率',
          type: 'line',
          yAxisIndex: 1,
          tooltip: {
            valueFormatter: function (value) {
              return value +" %";
            }
          },
          data: []
        },
      ]
    };
    request.get('/echarts/data').then(res => {
      this.visualData = res.data
      this.CourseCount = res.data.openCourse + res.data.chooseCourse
      let studentNum = res.data.stuNum
      let teacherNum = res.data.teaNum
      let sex = res.data.sexBoy
      let girl = res.data.sexGirl
      console.log(teacherNum)
      optionSchoolNumber.series[0].data = [
        {value: studentNum, name: '学生'},
        {value: teacherNum, name: '教师'}
      ];
      optionSexNumber.series[0].data = [
        {value: sex, name: '男生'},
        {value: girl, name: '女生'}
      ]
      myChart1.setOption(optionSchoolNumber);
      myChart2.setOption(optionSexNumber);
    })
    request.get('/echarts/pie').then(resp =>{
      option.xAxis[0].data = resp.data.courseName;
      option.series[0].data = resp.data.coursePerson;
      // option.series[1].data = resp.data.poor;
      option.series[1].data = resp.data.excellent;
      option.series[2].data = resp.data.pastRate;
      console.log(resp)
      myChart.setOption(option);

    })
  },
}
</script>

<style scoped>

.el-header, .el-main, .el-aside {
  padding: 0;
}

.card_span span {
  font-size: 14px;
}

.div-card-size {
  width: 100%;
  height: 240px;
  font-weight: 800;
}

.test /deep/ .el-calendar-table .el-calendar-day {
  height: 82px;
}

/deep/ .el-card__body, .el-main {
  padding: 10px;
}

.between {
  display: flex;
  justify-content: space-between;
}
</style>
